import React from 'react';
import {Button, Form, Input, Select, message} from 'antd';
import qs from 'qs';
import * as Constant from '../../../../common/const';
import * as Request from '../../../../Server/Upgrade';

const FormItem = Form.Item;
const { TextArea } = Input;
const Option = Select.Option;

class LanguageForm extends React.Component {
    constructor(props) {
        super(props);
    }

    handleSubmit = (e) => {
        e.preventDefault();
        this.props.form.validateFieldsAndScroll((err, values) => {
            if (!err) {
                values.languageNo = values.languageNo.replace(/\s*/g,"");
                Request.languageSaveOrEdit(qs.stringify(values)).then(res => {
                    if (res && Constant.REQUEST_SUCCESS == res.code) {
                        message.success(Constant.OPERATION_SUCCESS_TIP, Constant.AUTO_DISAPPEAR_TIME);
                        this.props.cancel(true);
                    }else{
                        res.code !== Constant.REQUEST_UNAUTHORIZED && message.error(res.msg,2);
                    }
                });
            }
        });
    }
    validator = (rule, value, callback) => {
        const id = this.props.form.getFieldValue('id');
        if(!value || !value.length ){
            callback();
            return;
        }
        Request.languageValidator(qs.stringify({id:id,languageNo: value})).then(res => {
            if (res && Constant.REQUEST_SUCCESS == res.code) {
                if (res.data) {
                    callback();
                } else {
                    callback('验证不通过');
                }
            } else {
                callback(res.msg);
            }
        })
    }

    render() {
        const {getFieldDecorator} = this.props.form;
        const ipFormItemLayout = {
            labelCol: {
                xs: {span: 24},
                sm: {span: 6},
            },
            wrapperCol: {
                xs: {span: 24},
                sm: {span: 15},
            },
        };
        const tailFormItemLayout = {
            wrapperCol: {
                xs: {
                    span: 24,
                    offset: 0,
                },
                sm: {
                    span: 16,
                    offset: 8,
                },
            },
        };

        return (
            <div>
                <Form onSubmit={this.handleSubmit}>
                    <FormItem>
                        {getFieldDecorator('id', {
                            initialValue: this.props.language && this.props.language.id,
                        })(
                            <Input type={'hidden'}/>
                        )}
                    </FormItem>
                    <FormItem label={'语言编号:'} {...ipFormItemLayout} >
                        {getFieldDecorator('languageNo', {
                            rules: [{
                                required: true, message: '请输入语言!',
                            },{
                                validator: this.validator,
                            }],
                            initialValue: this.props.language && this.props.language.languageNo,
                        })(
                            <Select
                                showSearch
                                placeholder="请选择语言编号"
                                optionFilterProp="children"
                                filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
                            >
                                <Option value="2052">2052</Option>
                                <Option value="1066">1066</Option>
                                <Option value="1041">1041</Option>
                                <Option value="1033">1033</Option>
                                <Option value="1028">1028</Option>
                                <Option value="1054">1054</Option>
                            </Select>
                        )}
                    </FormItem>
                    <FormItem label={'描述:'} {...ipFormItemLayout} >
                        {getFieldDecorator('description', {
                            initialValue: this.props.language && this.props.language.description,
                        })(
                            <TextArea  rows={4} cols={30}
                                       placeholder={'250字以内'}
                                       maxlength={250}
                            />
                        )}
                    </FormItem>
                    <FormItem {...tailFormItemLayout}>
                        <Button type="primary" htmlType="submit">保存</Button>
                        <Button type="primary" onClick={this.props.cancel}>返回</Button>
                    </FormItem>
                </Form>
            </div>
        );
    }
}

const RegisterLanguageForm = Form.create()(LanguageForm);
export default RegisterLanguageForm;